<!DOCTYPE html>
<html>
    <head>
        <title>ms-duplex</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                text: "aaa",
                count: 0
            })
            model.$watch("text", function(v) {
                console.log(v + " $watch")
            })
            window.onload = function() {

                var aaa = document.getElementById("aaa")
                setTimeout(function() {
                    model.count = 1
                    aaa.value = "llll"
                }, 1500)

                setTimeout(function() {
                    model.count = 2
                    aaa.value = "hhhh"
                }, 2000)
                setTimeout(function() {
                    model.count = 3
                    aaa.value = "hhhh"
                }, 2500)
                setTimeout(function() {
                    model.count = 4
                    aaa.value = "yyyy"
                }, 3000)
            }

        </script>
    </head>
    <body ms-controller="test">
        <p><span style="color:orangered">第<b>{{count}}</b>次改变</span>(我们通过程序修改el.value = xxx， 反向触发model.text改动)</p>
        <div><input ms-duplex="text" id="aaa"></div>
        <p>text的值 {{text}}</p>

    </body>
</html>
